<script setup lang="ts">
import List from './components/List.vue'
import axios from 'axios';
import { ref,onMounted } from 'vue';
type ChannelItem = {
  id: number
  name: string
}
type ChannelRes = {
  data: {
    channels: ChannelItem[]
  }
  message: string
}
const channleList = ref<ChannelItem[]>();
const getChannelList = async () => {
  const res = await axios.request<ChannelRes>({
    url: 'http://geek.itheima.net/v1_0/channels'
  })
  channleList.value = res.data.data.channels;
}
onMounted(()=>{
  getChannelList();
})
</script>

<template>
  <!-- tab切换 -->
  <van-tabs>
    <van-tab :title="item.name" v-for="item in channleList" :key="item.id">
      <!-- 文章列表组件 -->
      <List  :channelId = "item.id" />
    </van-tab>
   
  </van-tabs>

</template>


